<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <script src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script src="../js/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <style>
        .layui-table td {
            min-width: 50px !important;
        }
    </style>
    <script>
        $(function () { //ready

            to_page(1)

            $("#find").on("click",function(){
                var s=$("#status :selected").val()
                alert(s);
            })
        })

        function to_page(pn) {

            $.ajax({
                url: "loan/findall",
                type: "POST",
                data: {
                    "pn": pn
                },
                dataType: "JSON",
                success: function (result) {
                    // alert(result)
                    findallloan(result)
                    build_page_info(result)
                    build_page_nav(result)
                }
            })
        }

        function findallloan(result) {
            // console.log(result)
            // alert("sss")
            $("#emps_table tbody").empty();
            var loans = result.list;
            // alert(loans)
            $.each(loans, function (index, item) {

                $.each(item.shouldPayBack,function (index,n){
                    var loanId = $("<td></td>").append(n.spbId);
                    var userName = $("<td></td>").append(item.user.userName);
                    var tel = $("<td></td>").append(item.user.tel);
                    var money = $("<td></td>").append(item.money);
                    var lendtime=$("<td></td>").append(item.lendingTime);
                    // var loanId1 = $("<td></td>").append(item.loanId);
                    var spbstatus = $("<td></td>").append(n.spbStatus);
                    // var tel1 = $("<td></td>").append(item.user.tel);
                    // var money1 = $("<td></td>").append(item.money);
                    // var loan_id2 = $("<td></td>").append(item.loanId);
                    var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                        .append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("查看详情");
                    editBtn.attr("edit-id", item.loanId);
                    var btnId=$("<td></td>").append(editBtn);
                    $("<tr></tr>")
                        .append(loanId)
                        .append(userName)
                        .append(tel)
                        .append(money)
                        .append(spbstatus)
                        .append(lendtime)
                        .append(btnId)
                        .appendTo("#emps_table tbody");
                })
                // alert()
                // alert("ssss")
                // alert(item.loanId)

            });
        }
        //显示分页条数据
        function build_page_info(result) {
            $("#page_info_area").empty()
            $("#page_info_area").append("当前" + result.pageNum + "页,总" +
                result.pages + "页,总" +
                result.total + "条记录");

        }

        //显示导航条数据
        function build_page_nav(result) {
            //page_nav_area
            $("#page_nav_area").empty();
            var ul = $("<ul></ul>").addClass("pagination");

            //构建元素
            var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "#"));
            var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
            if (result.hasPreviousPage == false) {
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            } else {
                //为元素添加点击翻页的事件
                firstPageLi.click(function () {
                    to_page(1);
                });
                prePageLi.click(function () {
                    to_page(result.pageNum - 1);
                });
            }
            var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
            var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "#"));
            if (result.hasNextPage == false) {
                nextPageLi.addClass("disabled");
                lastPageLi.addClass("disabled");
            } else {
                nextPageLi.click(function () {
                    to_page(result.pageNum + 1);
                });
                lastPageLi.click(function () {
                    to_page(result.pages);
                });
            }


            //添加首页和前一页 的提示
            ul.append(firstPageLi).append(prePageLi);
            //1,2，3遍历给ul中添加页码提示
            $.each(result.navigatepageNums, function (index, item) {

                var numLi = $("<li></li>").append($("<a></a>").append(item));
                if (result.pageNum == item) {
                    numLi.addClass("active");
                }
                numLi.click(function () {
                    to_page(item);
                });
                ul.append(numLi);
            });
            //添加下一页和末页 的提示
            ul.append(nextPageLi).append(lastPageLi);

            //把ul加入到nav
            var navEle = $("<nav></nav>").append(ul);
            navEle.appendTo("#page_nav_area");

        }


    </script>
</head>

<body>
<!--<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>-->
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-input-inline layui-show-xs-block">
                            <input class="layui-input" placeholder="创建订单时间" name="start" id="start"></div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <input type="text" name="username" placeholder="请输入订单号" autocomplete="off"
                                   class="layui-input" id="orderId"></div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <input type="text" name="username" placeholder="请输入用户姓名" autocomplete="off"
                                   class="layui-input" id="userName">
                        </div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <!--订单状态(1.待处理 ，2.风控审批通过，3.风控二审 ，4.风控审批不通过 ，
                             5.财务审批通过 ，6.财务二审，7.财务审批不通过 ，8.审批通过， 9.审批不通过)-->
                            <select name="contrller" id="status">
                                <option value="">订单状态</option>
                                <option value="1">未还款</option>
                                <option value="2">风控初审中</option>
                                <option value="3">财务初审中</option>
                                <option value="4">风控二审中</option>
                                <option value="5">未通过风控审核</option>
                                <option value="6">已通过财务审核</option>
                                <option value="7">财务二审中</option>
                                <option value="8">已未通过财务审核</option>
                                <option value="9">审核失败</option>
                                <option value="10">已回款</option>
                                <option value="11">已逾期</option>
                                <option value="12">订单已失效</option>
                                <option value="13">财务已出款</option>
                                <option value="14">已结清原贷款</option>
                                <option value="15">已上传原房产信息</option>
                                <option value="16">已上传过户凭证</option>
                                <option value="17">已上传新房产信息</option>
                                <option value="18">已上传抵押凭证</option>
                                <option value="19">财务已结单</option>
                            </select>
                        </div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <select name="contrller" id="payType">
                                <option value="">业务类型</option>
                                <option value="1">非交易类型</option>
                                <option value="2">交易类业务</option>
                                <option value="3">额度内过桥业务</option>
                            </select>
                        </div>
                        <div class="layui-input-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="sreach" type="button" id="find">
                                <i class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <!--     <div class="layui-card-header">
                         <button class="layui-btn"
                                 onclick="xadmin.open('录单','add.html',$(window).width()*0.9,$(window).height() - 50)">
                             <i class="layui-icon"></i>录单
                         </button>
                     </div>-->
                <div class="layui-card-body " id="z1">
                    <table class="layui-table layui-form" id="emps_table">
                        <thead>
                        <tr>
                            <th>订单编号</th>
                            <th>客户姓名</th>
                            <th>手机号码</th>
                            <th>贷款金额</th>
<!--                            <th>借款天数</th>-->
<!--                            <th>收费方式</th>-->
<!--                            <th>业务类型</th>-->
                            <th>订单状态</th>
                            <th>下单时间</th>
                            <th id="t1">操作</th>
                        </tr>
                        </thead>
                        <tbody class="templateTbody">

                        </tbody>
                    </table>
                </div>

                <div class="layui-card-body ">
                    <div class="page">

                        <div class="row">
                            <div class="row">
                                <!--分页文字信息  -->
                                <div class="col-md-6" id="page_info_area"></div>
                                <!-- 分页条信息 -->
                                <div class="col-md-6" id="page_nav_area">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['laydate', 'form'], function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });

    });
</script>

</html>
<!--<script src="../js/jquery.min.js"></script>-->
<!--<script src="../js/common/ajaxcommon.js"></script>-->
<!--<script src="../js/fangjs/wind-list.js"></script>-->